<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />

    <p>购物车数据： {{ cartList }}</p>

    <!-- <p>总价： {{ $store.getters['cart/totalPrice'] }}</p> -->
    <p>总价： {{ totalPrice }}</p>

    <!-- 下面这句会报错 -->
    <!-- <p>总价： {{ $store.getters.cart.totalPrice }}</p> -->
    <button @click="test" class="btn btn-primary">调用fn</button>
  </div>
</template>

<script>

// 使用辅助函数
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Left',
  computed: {
    // 简化cart模块里的cartList
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['totalPrice'])
  },
  methods: {
    test () {
      // 默认情况下，这样调用，它都会按顺序调用
      // 先index，然后按注册顺序
      // 不合理：因为会造成调用不明确，而且多余调用
      // this.$store.commit('fn') // 开了命名空间后找index里的

      // 告诉他调用cart模块里的fn
      this.$store.commit('cart/fn')
    }
  }
}
</script>

<style></style>
